import React, { Component } from 'react';
import { Tag, Card, Row, Col, Dropdown, Menu, Typography, message, Modal, Form, Input, DatePicker, Select, Collapse } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import moment from 'moment';
import { apiPutRoomStatus } from '@/request/hotelRoomStatus'
const { RangePicker } = DatePicker;
const { Option } = Select;
const { Panel } = Collapse;

class newCard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            expand: false
        }
    }

    componentDidMount() {
        // console.log(this.props.data)
        this.setState({
            list: this.props.data,
        })
    }

    menuConfig = (type) => {
        const items = [
            {
                key: 0,
                label: <Link to={"/hotelRoomStatus/list/checkIn"} className={"button-span"}>办理入住</Link>,
            },
            {
                key: 1,
                label: (
                    <span className={"button-span"}>办理换房</span>
                ),
            },
            {
                key: 2,
                label: (
                    <span className={"button-span"}>办理退房</span>
                ),
            },
            {
                key: 3,
                label: (
                    <span className={"button-span"}>设为净房</span>
                ),
            },
            {
                key: 4,
                label: (
                    <span className={"button-span"}>设为脏房</span>
                ),
            },
            {
                key: 5,
                label: (
                    <span className={"button-span"}>设为维修</span>
                ),
            },
            {
                key: 6,
                label: (
                    <span className={"button-span"}>设置保留</span>
                ),
            },
            {
                key: 7,
                label: (
                    <span className={"button-span"}>取消保留</span>
                ),
            },
            {
                key: 8,
                label: (
                    <span className={"button-span"}>取消维修</span>
                ),
            },
        ]
        switch (type) {
            case 0: //空房 净房
                return [items[5], items[6]];
                // return [items[0], items[4], items[5], items[6]];
                break;
            case 5: //在住
                return [items[5]];
                // return [items[0], items[1], items[2], items[4], items[5]];
                break;
            case 4: //预定
                return [items[5]];
                // return [items[1], items[2], items[4], items[5]];
                break;
            case 1: //保留
                return [items[5], items[7]];
                break;
            case 2: //脏房
                return [items[3], items[5], items[6]];
                // return [items[0], items[3], items[5], items[6]];
                break;
            case 3: //维修
                return [items[3], items[6]];
                // return [items[0], items[3], items[4], items[6]];
                break;
            case 6: //预定&&维修
                return [items[8]];
                // return [items[0], items[3], items[4], items[6]];
                break;
            default:
                return []
                break
        }
    }
    colorConfig = (type) => {
        let { colorOption } = this.props;
        switch (type) {
            case 0:
                return colorOption[0].value;
                break;
            case 1:
                return colorOption[1].value;
                break;
            case 2:
                return colorOption[2].value;
                break;
            case 3:
                return colorOption[3].value;
                break;
            case 4:
                return colorOption[4].value;
                break;
            case 5:
                return colorOption[5].value;
                break;
            default:
                return '';
                break;
        }
    }
    changeRoomStatus = (e, id) => {
        switch (Number(e.key)) {
            case 3:
                // message.success("设为净房");
                this.baseChangeRoomStatus(0, id)
                break;
            case 4:
                // message.success("设为脏房");
                this.baseChangeRoomStatus(2, id)
                break;
            case 5:
                // message.success("设为维修");
                this.baseChangeRoomStatus(3, id)
                break;
            case 7:
                // message.success("取消保留");
                this.baseChangeRoomStatus(0, id)
                break;
            case 6:
                // message.success("设置保留");
                this.baseChangeRoomStatus(1, id)
                // this.isRetainModalOpenStatus(true)
                break;
            case 2:
                // message.success("办理退房");
                // this.isCheckOutModalOpenStatus(true)
                break;
            case 1:
                // message.success("办理换房");
                // this.isRoomChangeModalOpenStatus(true)
                break;
            case 8:
                // message.success("设为预定");
                this.baseChangeRoomStatus(0, id)
                break;
            default:
                break;
        }
    }
    // 改变状态
    baseChangeRoomStatus = async (e, id) => {
        // console.log(e,id)
        let res = await apiPutRoomStatus({
            roomStatus: e,
            roomId: id,
        })
        if (res.code === 0 && res.data) {
            message.success("修改成功");
            this.props.refresh()
        }

    }
    // 设置保留弹窗
    isRetainModalOpenStatus = (e) => {
        this.setState({
            isRetainModalOpen: e
        })
    }
    // 设置保留提交
    getRetainForm = () => {
        this.Retain.validateFields().then(values => {
            console.log(values)
        })
    }
    // 办理退房弹窗
    isCheckOutModalOpenStatus = (e) => {
        this.setState({
            isCheckOutModalOpen: e
        })
    }
    // 办理退房提交
    getCheckOut = () => {
        console.log("values")
    }
    // 办理换房弹窗
    isRoomChangeModalOpenStatus = (e) => {
        this.setState({
            isRoomChangeModal: e
        })
    }
    // 办理换房提交
    getRoomChange = () => {
        console.log("values")
    }
    // RangePicker设置禁选
    disabledDate = (current) => {
        // Can not select days before today and today
        return current && current < moment().endOf('day');
    };
    getRoomType = (item) => {
        let type = ''
        if (item.hotelHomeStatus === 4 || item.hotelHomeStatus === 5) {
            type = item.hotelHomeStatus
        } else {
            type = item.roomStatus
        }
        return type
    }
    getMenuType = (item) => {
        let type = ''
        if (item.roomStatus === 2 || item.roomStatus === 3) {
            type = item.roomStatus
        } else if (item.hotelHomeStatus) {
            type = item.hotelHomeStatus
        } else {
            type = item.roomStatus
        }
        if (item.hotelHomeStatus === 4 && item.roomStatus === 3) {
            type = 6
        }
        if (item.hotelHomeStatus === 5 && item.roomStatus === 3) {
            type = 6
        }
        return type
    }
    render() {
        let { list, isRetainModalOpen, isCheckOutModalOpen, isRoomChangeModal } = this.state;
        return (
            <div>
                <Row gutter={[16, 16]}>
                    {
                        list.map((item, index) => {
                            let type = this.getRoomType(item)
                            let menuType = this.getMenuType(item)
                            let color = this.colorConfig(type);
                            let tagColor = this.colorConfig(item.roomStatus);
                            // color = color == "#fff"? "#fafafa":color
                            // let value = <div style={{ color: (color == "#fff" ? "#000" : "#fff") }}>
                            //     {(item.beginTime && item.endTime) ? "入住时间:" + item.beginTime + " ~ " + item.endTime : ""}
                            //     11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
                            // </div>;
                            return <Col span={8} key={index}>
                                <Card
                                    title={item.roomName}
                                    extra={
                                        <>
                                            {
                                                item.roomStatus === 2 ? <Tag color={tagColor}>脏房</Tag> : ''
                                            }
                                            {
                                                item.roomStatus === 3 ? <Tag color={tagColor}>维修</Tag> : ''
                                            }
                                            <Dropdown
                                                overlay={(<Menu
                                                    items={this.menuConfig(menuType)}
                                                    onClick={(key) => this.changeRoomStatus(key, item.roomId)}
                                                />)}
                                                placement="bottom"
                                                arrow
                                                trigger={['click']}

                                            >
                                                {/*<a onClick={(e) => e.preventDefault()}>*/}
                                                <SettingOutlined />
                                                {/*</a>*/}
                                            </Dropdown></>
                                    }
                                    hoverable
                                    style={{
                                        borderColor: color == "#fff" ? "#e8e8e8" : color,
                                        borderRadius: "8px",

                                    }}
                                    headStyle={{
                                        // borderColor: color == "#fff"?"":color,
                                        color: color == "#fff" ? "#000" : color,
                                    }}
                                    bodyStyle={{
                                        backgroundColor: color == "#fff" ? "transparent" : color,
                                        // color: color ? "#fff" : "#000",
                                        borderRadius: "0 0 6px 6px",
                                        minHeight: "70px",
                                        color: color == "#fff" ? "#000" : "#fff"
                                    }}
                                >
                                    {(item.beginTime && item.endTime) ? "入住时间:" + item.beginTime + " ~ " + item.endTime : ""}
                                    {/*<Collapse ghost expandIconPosition={'end'} >*/}
                                    {/*    <Panel header={<div style={{color: (color == "#fff" ? "#000" : "#fff")}}>{(item.beginTime && item.endTime) ? "入住时间:" + item.beginTime + " ~ " + item.endTime : ""}</div>} key="1">*/}
                                    {/*        /!*<p style={{color: (color == "#fff" ? "#000" : "#fff")}}>1231231</p>*!/*/}
                                    {/*    </Panel>*/}
                                    {/*</Collapse>*/}

                                </Card>
                            </Col>
                        })
                    }
                </Row>
                <Modal title="设置保留"
                    visible={isRetainModalOpen}
                    onCancel={() => this.isRetainModalOpenStatus(false)}
                    onOk={this.getRetainForm}
                >
                    <Form
                        ref={ref => this.Retain = ref}
                        labelCol={{
                            span: 6,
                        }}
                        wrapperCol={{
                            span: 15,
                        }}
                    >
                        <Form.Item rules={[{ required: true }]} label="保留时间" name="time">
                            <RangePicker
                                // onChange={this.onChangeCheckIn}
                                style={{ width: "100%" }}
                                disabledDate={this.disabledDate}
                                allowClear={false}
                            />
                        </Form.Item>
                        <Form.Item rules={[{ required: true }]} label="房型名称" name="name">
                            <Select
                                placeholder="请选择房型名称"
                                options={[
                                    {
                                        value: '0',
                                        label: '【自营品牌】豪华猫咪VIP',
                                    },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item rules={[{ required: true }]} label="房间号码" name="num">
                            <Select
                                placeholder="请选择房间号码"
                                options={[
                                    {
                                        value: '0',
                                        label: '002房间',
                                    },
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="备注" name="remark">
                            <Input.TextArea showCount maxLength={30} />
                        </Form.Item>
                    </Form>
                </Modal>
                <Modal title="办理退房"
                    visible={isCheckOutModalOpen}
                    onCancel={() => this.isCheckOutModalOpenStatus(false)}
                    onOk={this.getCheckOut}
                >
                    <Form
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 15,
                        }}
                    >
                        <Form.Item label="办理退房房间">
                            <span className="ant-form-text">【自营品牌】豪华猫咪VIP-002房间</span>
                        </Form.Item>
                        <Form.Item label="原计划入离开时间">
                            <div className="ant-form-text">2023-01-12-2023-01-18<span className="span">共6晚</span>
                            </div>
                        </Form.Item>
                        <Form.Item label="实际入离开时间">
                            <div className="ant-form-text">2023-01-12-2023-01-13<span className="span">共1晚</span>
                            </div>
                        </Form.Item>
                        <Form.Item label="注">
                            <span className="ant-form-text">当前办理退房仅限于非APP端下单的用户&门店办理下单用户。<br />APP端下单用户，请在酒店订单详情发起提前退房操作</span>
                        </Form.Item>
                    </Form>
                </Modal>
                <Modal title="办理换房"
                    visible={isRoomChangeModal}
                    onCancel={() => this.isRoomChangeModalOpenStatus(false)}
                    onOk={this.getRoomChange}
                >
                    <Form
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 15,
                        }}
                    >
                        <Form.Item label="原房间">
                            <span className="ant-form-text">豪华猫咪VIP-002房间-已入住</span>
                        </Form.Item>
                        <Form.Item label="住宿时间" extra={"总共1晚，已入住1晚"}>
                            <span className="ant-form-text">2023-01-12-2023-01-18</span>
                        </Form.Item>
                        <Form.Item label="换房至" name={"address"}>
                            <Input.Group compact>
                                <Form.Item
                                    name={['address', 'province']}
                                    noStyle
                                    rules={[{ required: true, message: 'Province is required' }]}
                                >
                                    <Select placeholder="请选择房型">
                                        <Option value="0">Zhejiang</Option>
                                        <Option value="1">Jiangsu</Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    name={['address', 'street']}
                                    noStyle
                                    rules={[{ required: true, message: 'Street is required' }]}
                                >
                                    <Select placeholder="请选择房号">
                                        <Option value="0">Zhejiang</Option>
                                        <Option value="1">Jiangsu</Option>
                                    </Select>
                                </Form.Item>
                            </Input.Group>
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default newCard;
